import React, { MouseEvent, ChangeEvent } from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { dataCompute } from "./../../redux/action";

type props = {
	info: string;
	onChangeEvent(e: ChangeEvent<HTMLElement>): void;
};

const M: React.SFC<props> = ({ onChangeEvent, info }) => (
	<div>
		<div>
			<h1>
				<span>测试 redux 广播通知组件</span>
			</h1>
		</div>
		<div>
			<h3>
				<span>对其他组件进行广播通知</span>
			</h3>
		</div>
		<div>
			<div>
				<input type="text" name="" id="" placeholder="输入一些文字" onChange={onChangeEvent} />
			</div>
			<div>
				<h4>
					<span>{info}</span>
				</h4>
			</div>
		</div>
	</div>
);

const mapStateToProps = (state: any) => {
	return {
		info: state.dataCompute.info,
	};
};

const mapDispatchToProps = (dispatch: Dispatch) => {
	return {
		onChangeEvent: (e: ChangeEvent<HTMLInputElement>) => {
			let text = e.target.value;
			dispatch(dataCompute("BROADCAST", text));
		},
	};
};

const reduxCompent = connect(mapStateToProps, mapDispatchToProps)(M);

export default reduxCompent;
